import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { ModalService } from '@iux/live';

@Component({
  templateUrl: './position.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PositionComponent {
  constructor(private modalService: ModalService) {}

  contentComponent = ModalCustomComponent;

  open(position) {
    const hideButton = position === 'left' || position === 'right' ? true : false;

    this.modalService.create({
      lvModalKey: `my_drawer_${position}`,
      lvType: 'drawer',
      lvWidth: 'M',
      lvOuterClosable: true,
      lvCloseButtonDisplay: hideButton,
      lvDrawerPosition: position,
      lvDrawerPositionOffset: ['0px', '0px', '0px', '0px'],
      lvHeader: 'Modal Title',
      lvContent: this.contentComponent,
      lvComponentParams: {
        title: 'This is transfer parameter',
      },
      lvAfterOpen: modal => {
        console.log(modal.getContentComponent());
      },
      lvOk: modal =>
        new Promise<void>(resolve => {
          modal.getModalElement().querySelector('h3').innerHTML = 'Parameter changed!';
          setTimeout(() => {
            resolve();
          }, 2000);
        }),
    });
  }
}

@Component({
  selector: 'app-drawer-custom-component',
  template: `
    <div>
      <h3>{{ title }}</h3>
      <div>
        <p>Drawer instance in component</p>
        <p>Drawer instance in component</p>
        <p>Drawer instance in component</p>
        <p>Drawer instance in component</p>
        <p>Drawer instance in component</p>
      </div>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ModalCustomComponent {
  @Input() title = '';
}
